import { React, useState } from 'react'
import "./style.css"
import db from 'debounce';
import imgfour from "../../image/51.gif"
import imgseven from "../../image/7.jpg"
import imgeight from "../../image/8.png"
import imgsix from "../../image/6.gif"
export default function BxyComponent() {
  const [list, setlist] = useState([{
    id: 1,
    name: "幼儿园",
    children: [{
      img: imgfour
      , word: "幼儿园盛大开园方案1"
    }, {
      word: "校园生活宣传方案",
      img: imgseven
    }, {
      word: "幼儿园转招生宣传2",
      img: imgeight
    }, {
      img: imgfour
      , word: "幼儿园盛大开园方案1"
    }, {
      word: "校园生活宣传方案",
      img: imgseven
    }, {
      word: "幼儿园转招生宣传2",
      img: imgeight
    }, {
      img: imgfour
      , word: "幼儿园盛大开园方案1"
    }, {
      word: "校园生活宣传方案",
      img: imgseven
    }, {
      word: "幼儿园转招生宣传2",
      img: imgeight
    }, {
      img: imgfour
      , word: "幼儿园盛大开园方案1"
    }, {
      word: "校园生活宣传方案",
      img: imgseven
    }, {
      word: "幼儿园转招生宣传2",
      img: imgeight
    }, {
      word: "幼儿园转招生宣传2",
      img: imgeight
    },]
  }, {
    id: 2,
    name: '物业管理',
    children: [{
      word: "物业通知公告解决方案",
      img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F91c8d758-f7f5-4d46-a676-97696948209f%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1692320913&t=8178f0ebffdbeff02105e00890941b1c"
    }, {
      word: "物业活动月解决方案",
      img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Ffaca5195-c8f4-4705-b9c3-e15336be8141%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1692320913&t=8b560e214bf9b886c2a96687fbc8f9b5"
    }, {
      word: "物业便民服务专题解决方案",
      img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F7295b902-0404-42e5-ba3d-56f1a32c396f%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1692320913&t=04eb733f3ac077b9969b434f69d6fe0f"
    }, {
      word: "物业通知公告解决方案",
      img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F91c8d758-f7f5-4d46-a676-97696948209f%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1692320913&t=8178f0ebffdbeff02105e00890941b1c"
    }, {
      word: "物业活动月解决方案",
      img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Ffaca5195-c8f4-4705-b9c3-e15336be8141%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1692320913&t=8b560e214bf9b886c2a96687fbc8f9b5"
    }, {
      word: "物业便民服务专题解决方案",
      img: "https://gimg2.baidu.com/image_search/src  =http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F7295b902-0404-42e5-ba3d-56f1a32c396f%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1692320913&t=04eb733f3ac077b9969b434f69d6fe0f"
    }, {
      word: "物业通知公告解决方案",
      img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F91c8d758-f7f5-4d46-a676-97696948209f%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1692320913&t=8178f0ebffdbeff02105e00890941b1c"
    }, {
      word: "物业活动月解决方案",
      img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Ffaca5195-c8f4-4705-b9c3-e15336be8141%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1692320913&t=8b560e214bf9b886c2a96687fbc8f9b5"
    }, {
      word: "物业便民服务专题解决方案",
      img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F7295b902-0404-42e5-ba3d-56f1a32c396f%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1692320913&t=04eb733f3ac077b9969b434f69d6fe0f"
    }, {
      word: "物业通知公告解决方案",
      img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F91c8d758-f7f5-4d46-a676-97696948209f%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1692320913&t=8178f0ebffdbeff02105e00890941b1c"
    }, {
      word: "物业活动月解决方案",
      img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2Ffaca5195-c8f4-4705-b9c3-e15336be8141%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1692320913&t=8b560e214bf9b886c2a96687fbc8f9b5"
    }, {
      word: "物业便民服务专题解决方案",
      img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F7295b902-0404-42e5-ba3d-56f1a32c396f%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1692320913&t=04eb733f3ac077b9969b434f69d6fe0f"
    }]
  }, {
    id: 3,
    name: "金融行业",
    children: [{
      word: " 银行宣传方案",
      img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F7d5e86e4-1009-44f2-85b8-50712eddc846%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1692320913&t=6cbcd804db405d453620400dc50b25e2"
    }, {

      word: "金融行业招聘方案",
      img: "https://img0.baidu.com/it/u=1934737095,1984658296&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666"
    }, {
      word: "银行技能大赛方案",
      img: "https://img1.baidu.com/it/u=2347125552,289881638&fm=253&fmt=auto&app=138&f=GIF?w=353&h=499"
    }, {
      word: " 银行宣传方案",
      img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F7d5e86e4-1009-44f2-85b8-50712eddc846%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1692320913&t=6cbcd804db405d453620400dc50b25e2"
    }, {

      word: "金融行业招聘方案",
      img: "https://img0.baidu.com/it/u=1934737095,1984658296&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666"
    }, {
      word: "银行技能大赛方案",
      img: "https://img1.baidu.com/it/u=2347125552,289881638&fm=253&fmt=auto&app=138&f=GIF?w=353&h=499"
    }, {
      word: " 银行宣传方案",
      img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F7d5e86e4-1009-44f2-85b8-50712eddc846%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1692320913&t=6cbcd804db405d453620400dc50b25e2"
    }, {

      word: "金融行业招聘方案",
      img: "https://img0.baidu.com/it/u=1934737095,1984658296&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=666"
    }, {
      word: "银行技能大赛方案",
      img: "https://img1.baidu.com/it/u=2347125552,289881638&fm=253&fmt=auto&app=138&f=GIF?w=353&h=499"
    }]
  }, {
    id: 4,
    name: "旅游行业",
    children: [{
      word: "乡村文化旅游节活动方案",
      img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202004%2F23%2F20200423210301_JGciS.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1692321089&t=7c4f4642b3a17b65672382c35af7e2af"
    }, {
      word: "旅行公司宣传",
      img: "https://img0.baidu.com/it/u=153240662,3804540260&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889"
    }, {
      word: "文旅推介会活动方案",
      img: "https://img0.baidu.com/it/u=2215777604,215127408&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889"
    }, {
      word: "乡村文化旅游节活动方案",
      img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202004%2F23%2F20200423210301_JGciS.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1692321089&t=7c4f4642b3a17b65672382c35af7e2af"
    }, {
      word: "旅行公司宣传",
      img: "https://img0.baidu.com/it/u=153240662,3804540260&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889"
    }, {
      word: "文旅推介会活动方案",
      img: "https://img0.baidu.com/it/u=2215777604,215127408&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889"
    }, {
      word: "乡村文化旅游节活动方案",
      img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202004%2F23%2F20200423210301_JGciS.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1692321089&t=7c4f4642b3a17b65672382c35af7e2af"
    }, {
      word: "旅行公司宣传",
      img: "https://img0.baidu.com/it/u=153240662,3804540260&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889"
    }, {
      word: "文旅推介会活动方案",
      img: "https://img0.baidu.com/it/u=2215777604,215127408&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889"
    }]
  }, {
    id: 5,
    name: "会议活动",
    children: [{
      word: "互联网行业研讨会解决方案",
      img: imgsix
    }, {
      word: "年度工作汇报会议活动方案",
      img: "https://img2.baidu.com/it/u=4209027460,3826792400&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=625"
    }, {
      word: "金融信托客户答谢会活动方案",
      img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F81912637-094d-4efb-95e6-37d5acc51566%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1692321259&t=aa6dd54151b015a822a3a38119d10ee3  "
    }, {
      word: "互联网行业研讨会解决方案",
      img: imgsix
    }, {
      word: "年度工作汇报会议活动方案",
      img: "https://img2.baidu.com/it/u=4209027460,3826792400&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=625"
    }, {
      word: "金融信托客户答谢会活动方案",
      img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F81912637-094d-4efb-95e6-37d5acc51566%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1692321259&t=aa6dd54151b015a822a3a38119d10ee3  "
    }, {
      word: "互联网行业研讨会解决方案",
      img: imgsix
    }, {
      word: "年度工作汇报会议活动方案",
      img: "https://img2.baidu.com/it/u=4209027460,3826792400&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=625"
    }, {
      word: "金融信托客户答谢会活动方案",
      img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F81912637-094d-4efb-95e6-37d5acc51566%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1692321259&t=aa6dd54151b015a822a3a38119d10ee3  "
    }]
  }])
  const [newIndex, setnewindex] = useState(0)
  const [ofindex, setindex] = useState(0)
  const setHoveredItem = db((index) => {
    console.log(index);
    setnewindex(index)
    setindex(0)
  }, 500)
  const handleLeftArrowClick = () => {
    const imgbox = document.querySelector('.img-box').clientWidth;
    const minOffset = 0;
    const newOffset = ofindex + (imgbox * 2);
    console.log(newOffset, '左');

    if (newOffset <= minOffset) {
      setindex(newOffset);
    }
    // setindex(presss => presss + imgbox);
  };
  const handleRightArrowClick = () => {
    const imgbox = document.querySelector('.img-box').clientWidth;
    const childrens = document.querySelector('.list-children').clientWidth;
    console.log(childrens);
    // const maxOffset = 1320 + 660;
    // 
    const newOffset = ofindex - (imgbox * 2);
    console.log(newOffset / 3, 'aaa')

    console.log(newOffset, '右');
    // if (newOffset >= maxOffset) {
    if (newOffset >= -(260 * list[newIndex].children.length) + 1300) {
      setindex(newOffset);
    }
  };
  return (

    <div className='box'>
      <div className="box-item">
        <div className='tab-title'>
          <h2 className='Title'>行业解决方案·解决标杆玩法</h2>
          <div className="list">
            {
              list.map((item, index) => {
                return (
                  <div
                    className={`list-item ${index === newIndex ? 'active' : ''}`}
                    key={item.id} onMouseEnter={() => setHoveredItem(index)}
                  > {item.name}
                  </div>
                )
              })
            }
          </div>
        </div>

        <div className='left' onClick={() => handleLeftArrowClick()}>
          &lt;
        </div>
        <div className="list-children">
          {
            list[newIndex].children.map((item, index) => {
              // console.log(item);
              // 
              return (
                <div key={index} style={{ transform: `translateX(${ofindex}px)` }} >
                  <dl className="img-box"
                  // onMouseEnter={}
                  // onMouseEnter={() => onmouseovers()}
                  >
                    <dt>
                      <img src={item.img} alt="" />
                    </dt>
                    <dd>
                      <h2 className='word-item'>{item.word}</h2>
                      <div className='text'>
                        <span>3文件</span>
                        <span>1仪表盘</span>
                        <span>11模版</span>
                      </div>
                      <div className='spanss'>
                        <p>共15个内容</p>
                        <p>@243</p>
                      </div>
                    </dd>
                  </dl></div>
              )
            })
          }
        </div>
        <div className="right" onClick={() => handleRightArrowClick()} >
          &gt;
        </div>

      </div>
    </div >
  )
}
